import React, { Component, useState } from 'react';
// 属性验证
import PropTypes from 'prop-types';

class Son extends Component {
    render() {
        const { name, age } = this.props;
        return (
            <div>
                <h2>我是Son组件</h2>
                <p>{name}</p>
                <p>{age}</p>
            </div>
        )
    }
}
Son.propTypes = {
    name: PropTypes.string.isRequired, // 字符串类型，必传
    age: PropTypes.number   
}
Son.defaultProps = {
    name: "liming",
    age: 18
}
function Father(props) {
    const { name, age,giveMoney } = props;
    const [money,setMoney] = useState(0);
    const saveMoney = () => {
        setMoney(money + 1);
        giveMoney(money);
    }
    return (
        <div>
            <h2>我是Father组件</h2>
            <p>{name}</p>
            <p>{age}</p>
            <Son />
            <button onClick={() => saveMoney()}>送钱</button>
        </div>
    )
}
export default class GrandFather extends Component {
    constructor() {
        super();
        this.state = {
            money: 0
        }
    }
    render() {
        return (
            <div>
                <Father name="lisi" age="40" giveMoney={this.getMoney.bind(this)} />
                {this.state.money}
            </div>
        )
    }
    getMoney(num) {
        this.setState({
            money: num
        })
    }
}
